import {
  Button,
  Cascader,
  Divider,
  Form,
  FormItem,
  Input,
  InputNumber,
  message,
  Spin,
  Textarea
} from 'ant-design-vue'
import { defineComponent, onMounted, ref } from 'vue'

import { riverApi } from '@/apis'
import { ExpressInfo } from '@/apis/riverTypes'
import { getAreaOptions, isValueEmpty } from '@/utils'

export default defineComponent({
  name: 'RvAddress',
  setup() {
    const data = ref({} as ExpressInfo)
    const loading = ref(false)
    const confirmLoading = ref(false)
    onMounted(() => {
      getDetail()
    })

    async function getDetail() {
      try {
        loading.value = true
        const config = await riverApi.getAddressConfig()
        if (config) {
          data.value = config
          data.value.addressTemp = [
            config.receiveProvince,
            config.receiveCity,
            config.receiveDistrict
          ]
        }
      } finally {
        loading.value = false
      }
    }

    //保存
    async function handleSave() {
      if (!data.value.receiveName) {
        message.error('请输入收货人')
        return
      }
      if (!data.value.receivePhone) {
        message.error('请输入手机号')
        return
      }
      if (isValueEmpty(data.value.addressTemp)) {
        message.error('请选择所在地区')
        return
      }
      if (!data.value.receiveAddress) {
        message.error('请输入详细地址')
        return
      }
      data.value.receiveProvince = data.value.addressTemp[0]
      data.value.receiveCity = data.value.addressTemp[1]
      data.value.receiveDistrict = data.value.addressTemp[2]
      try {
        confirmLoading.value = true
        await riverApi.updateAddressConfig(data.value)
        message.success('保存成功')
      } finally {
        confirmLoading.value = false
      }
    }

    return {
      data,
      loading,
      confirmLoading,
      handleSave
    }
  },
  render() {
    return (
      <Spin spinning={this.loading}>
        <Form labelCol={{ span: 3 }} style={{ marginTop: '20px' }}>
          <FormItem label="收货人" required>
            <Input
              v-model:value={this.data.receiveName}
              maxlength={60}
              placeholder="请输入"
              style={{ width: '300px' }}
            />
          </FormItem>
          <FormItem label="手机号" required>
            <InputNumber
              v-model:value={this.data.receivePhone}
              maxlength={11}
              placeholder="请输入"
              style={{ width: '300px' }}
            />
          </FormItem>
          <FormItem label="所在地区" required>
            <Cascader
              v-model:value={this.data.addressTemp}
              fieldNames={{
                label: 'label',
                value: 'label'
              }}
              options={getAreaOptions()}
              placeholder="请选择"
              style={{ width: '300px' }}
            ></Cascader>
          </FormItem>
          <FormItem label="详细地址" required>
            <Textarea
              v-model:value={this.data.receiveAddress}
              placeholder="请输入"
              style={{ width: '300px' }}
            ></Textarea>
          </FormItem>
          <Divider></Divider>
          <FormItem label=" " colon={false}>
            <Button
              loading={this.confirmLoading}
              type="primary"
              onClick={this.handleSave}
            >
              保存
            </Button>
          </FormItem>
        </Form>
      </Spin>
    )
  }
})
